<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%" :before-close="close">
    <el-form label-width="0.6rem" style="margin-right: 0.4rem" ref="MAform" :model="form" :rules="rules">
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="品牌" prop="brand">
        <el-input v-model="form.brand"></el-input>
      </el-form-item>
      <el-form-item label="型号" prop="model">
        <el-input v-model="form.model"></el-input>
      </el-form-item>
      <el-form-item label="库存" prop="reserve">
        <el-input v-model.number="form.reserve"></el-input>
      </el-form-item>
      <el-form-item label="存放地点" prop="location">
        <el-input v-model="form.location"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="form.remark"></el-input>
      </el-form-item>
    </el-form>
    <div class="dialog--button-center">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {addSpareMaterial, modifySpareMaterial, queryById} from "~/interface/sparePartsManagement/SpareParts";

export default {
  name: "ModifyAndAddDialog",
  data() {
    return {
      dialogVisible: false,
      dialogTitle: null,
      judgeId: null,
      form: {
        id: null,
        name: null,
        brand: null,
        model: null,
        reserve: null,
        location: null,
        remark: null
      },
      rules: {
        id: null,
        name: {required: true, message: "请输入名称", trigger: 'blur'},
        brand: {required: true, message: "请输入品牌", trigger: 'blur'},
        model: [
          {required: true, message: "请输入型号", trigger: 'blur'},
        ],
        reserve: [
          {required: true, message: "请输入库存", trigger: 'blur'},
          {type: 'number', message: "请输入一个数字", trigger: 'blur'}
        ],
        location: {required: true, message: "请输入存放地点", trigger: 'blur'},
        remark: {required: true, message: "请输入备注", trigger: 'blur'},
      }
    }
  },
  methods: {
    async init(id) {
      if (id === 0) {
        this.dialogTitle = "新增"
        this.dialogVisible = true
      } else {
        this.dialogTitle = "修改"
        this.dialogVisible = true
        this.form = await queryById(id)
      }
      this.judgeId = id
    },
    submit() {
      this.$refs.MAform.validate(async (valid) => {
        if (valid) {
          let result = null
          if (this.judgeId === 0) {
            result = await addSpareMaterial(this.form)
            if (Number(result.resultCode) !== 200) {
              this.$message({
                showClose: true,
                message: '未添加成功',
                type: 'error'
              })
            } else {
              this.$message({
                showClose: true,
                message: '添加成功',
                type: 'success'
              })
            }
          } else {
            result = await modifySpareMaterial(this.form)
            if (Number(result.resultCode) !== 200) {
              this.$message({
                showClose: true,
                message: '未修改成功',
                type: 'error'
              })
            } else {
              this.$message({
                showClose: true,
                message: '修改成功',
                type: 'success'
              })
            }
          }
          this.$refs.MAform.resetFields()
          this.dialogVisible = false
          this.$emit('refresh')
        } else {
          this.$message({
            showClose: true,
            message: '表单信息有误',
            type: 'error'
          })
          return false
        }
      })

    },
    close(done) {
      this.$refs.MAform.resetFields()
      done()
    },
  }
}
</script>

<style scoped>
.dialog--button-center {
  margin-top: 0.25rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
